import { TabBar } from "antd-mobile"; //组件（底部切换）
import React, { Component } from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
import TabExample from "./index/index-title"; //首页里面的顶部切换
import Classify from "./Classify/classify"; //底部 分类
//icon图片
import home from "../images/icon/icon5.png";
import home1 from "../images/icon/icon5-5.png";
import classify from "../images/icon/icon3.png";
import classify1 from "../images/icon/icon3-3.png";
import shopping from "../images/icon/icon2-2.png";
import shopping1 from "../images/icon/icon2.png";
import me from "../images/icon/icon1-1.png";
import me1 from "../images/icon/icon1.png";
import logo from "../images/icon/logo.png";
// 登陆
import Login from "./Myhome/login/login";
import Register from "./Myhome/login/register";
import Successlogin from "./Myhome/login/successlogin"; //登录成功后的页面
import { CookiesProvider } from "react-cookie";
//购物车
import ShoppingCart from "../components/shoppingCart/shoppingCart";

class Footer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: "redTab",
      fullScreen: true
    };
  }

  renderContent(pageText) {
    return (
      <div
        style={{
          backgroundColor: "white",
          height: "100%",
          textAlign: "center"
        }}
      >
        <div style={{ paddingTop: 60 }}>{pageText}</div>
      </div>
    );
  }

  //跳转购物车
  toShopCart() {
    this.setState({
      selectedTab: "yellowTab"
    });
  }

  render() {
    return (
      <div>
        <div
          style={
            this.state.fullScreen
              ? { position: "fixed", height: "100%", width: "100%", top: 0 }
              : { height: 400 }
          }
        >
          <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            hidden={this.state.hidden}
          >
            <TabBar.Item
              icon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background:
                      "url(" + home + ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              selectedIcon={
                <div
                  style={{
                    // paddingTop:"0px!important",
                    width: "22px",
                    height: "22px",
                    background:
                      "url(" + home1 + ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              title="首页"
              key="home"
              selected={this.state.selectedTab === "redTab"}
              onPress={() => {
                this.setState({
                  selectedTab: "redTab"
                });
              }}
              data-seed="logId1"
            >
              {this.renderContent(<TabExample />)}
            </TabBar.Item>
            <TabBar.Item
              title="分类"
              key="classify"
              icon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background:
                      "url(" +
                      classify +
                      ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              selectedIcon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",

                    background:
                      "url(" +
                      classify1 +
                      ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              selected={this.state.selectedTab === "blueTab"}
              onPress={() => {
                this.setState({
                  selectedTab: "blueTab"
                });
              }}
              data-seed="logId"
            >
              {this.renderContent(<Classify />)}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div
                  style={{
                    width: "40px",
                    height: "40px",
                    background:
                      "url(" + logo + ") center center /  40px 40px no-repeat"
                  }}
                />
              }
            >
              {this.renderContent(<h1>发现</h1>)}
            </TabBar.Item>
            <TabBar.Item
              icon={{ uri: "" + shopping + "" }}
              selectedIcon={{ uri: "" + shopping1 + "" }}
              title="购物车"
              key="shopping"
              selected={this.state.selectedTab === "yellowTab"}
              onPress={() => {
                this.setState({
                  selectedTab: "yellowTab"
                });
              }}
            >
              {this.renderContent(<ShoppingCart />)}
            </TabBar.Item>
            <TabBar.Item
              icon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background:
                      "url(" + me + ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              selectedIcon={
                <div
                  style={{
                    width: "22px",
                    height: "22px",
                    background:
                      "url(" + me1 + ") center center /  21px 21px no-repeat"
                  }}
                />
              }
              title="我的"
              key="me"
              selected={this.state.selectedTab === "pinkTab"}
              onPress={() => {
                this.setState({
                  selectedTab: "pinkTab"
                });
              }}
            >
              {this.renderContent(
                <div>
                  <Route exact path="/home" component={Login} />
                  <Route exact path="/home/register" component={Register} />
                  <Route exact path="/home/success" component={Successlogin} />
                </div>
                // <h1>我的</h1>
              )}
            </TabBar.Item>
          </TabBar>
        </div>
      </div>
    );
  }
}
export default Footer;
